import {useState} from "react";
import {EmptyPage, SearchBar} from "./CommonUI";
import {BlogBean, matchBlog} from "../utils/BlogUtils";
import {useNavigate} from "react-router-dom";
import {NAVI_BLOG_CREATE} from "../constant/MainNavi";


export function CreateBlogFragment() {
    return <div>
        新建文章
    </div>
}


export function BlogFragment() {

    const [detail, setDetail] = useState(null)

    const navigate = useNavigate();

    //todo 假数据
    const data = [
        new BlogBean("春天", "春天是美好的季节", "2023-03-02", ["https://img1.baidu.com/it/u=3360944617,3712077481&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"], "一树"),
        new BlogBean("春天", "春天是美好的季节", "2023-03-02", ["https://img1.baidu.com/it/u=3360944617,3712077481&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"], "一树"),
        new BlogBean("春天", "春天是美好的季节", "2023-03-02", ["https://img1.baidu.com/it/u=3360944617,3712077481&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"], "一树"),
        new BlogBean("春天", "春天是美好的季节", "2023-03-02", ["https://img1.baidu.com/it/u=3360944617,3712077481&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"], "一树"),
        new BlogBean("春天", "春天是美好的季节", "2023-03-02", ["https://img1.baidu.com/it/u=3360944617,3712077481&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"], "一树"),
    ]

    return <div>
        {detail == null ? <BlogList
            onClick={(bean: BlogBean) => {
                setDetail(bean)
            }} data={data}
            onClickCreate={() => {
                navigate(NAVI_BLOG_CREATE)
            }}
        /> : <BlogDetails data={detail}/>}
    </div>

}

function BlogDetails(props) {
    //BlogBean
    const data: BlogBean = props.data
    const image: [] = data.image
    return <div>
        <h1>{data.title}</h1>
        <p style={{
            marginRight: "10px",
            textAlign: "right",
            margin: "0px",
            paddingRight: "20px",
            fontSize: "15px",
        }}>
            {data.author}
        </p>
        <p style={{
            margin: "0px",
            marginRight: "10px",
            textAlign: "right",
            paddingRight: "20px",
            fontSize: "15px",
        }}>
            {data.data}
        </p>
        <div style={{
            textAlign: "left", paddingLeft: "20px", paddingRight: "20px"
        }}>
            {data.text}
        </div>
        <div style={{
            marginTop: "50px"
        }}>
            {image.filter(i => i !== undefined && i.length !== 0).map(item =>
                <img src={item} alt={"错误"}/>
            )}
        </div>
    </div>
}

function BlogList(props) {

    const [search, setSearch] = useState("")

    //搜索过滤
    const items = matchBlog(props.data, search).map(item => <BlogItem data={item} onClick={(bean) => {
        props.onClick(bean)
    }}/>)

    return <div>
        <span>
            <SearchBar onTextChange={(text) => {
                setSearch(text)
            }} onTextSearch={(text) => {
                setSearch(text)
            }}/>
        </span>
        {/*这是操作类*/}
        <span style={{
            float: "right", marginRight: "20px"
        }}>
           <a onClick={() => {
               props.onClickCreate()
           }}>新增</a>
        </span>

        {/*这是内容*/}
        <div>
            {items.length === 0 ? <EmptyPage/> : <li style={{listStyle: "none"}}>{items}
            </li>}
        </div>
    </div>
}

function BlogItem(props) {
    //BlogBean
    const bean: BlogBean = props.data
    const image: [] = bean.image
    return <div style={{
        backgroundColor: "#b1e7de", height: "140px", cursor: "pointer", margin: "5px",
        borderRadius: "10px"
    }} onClick={() => {
        props.onClick(bean)
    }}>
        <p style={{
            fontSize: "30px", textAlign: "left", marginLeft: "22px", fontStyle: "oblique", marginTop: "0px"
        }}>{bean.title}</p>
        <span style={{
            float: "left", fontSize: "20px", textAlign: "left", marginLeft: "22px", marginTop: "-15px"
        }}>{bean.text}</span>

        {image !== undefined && image.length !== 0 && <img style={{
            width: "200px",
            float: "right",
            marginRight: "60px",
            marginTop: "-60px"
        }} src={image[0]} alt={"错误"}/>}

    </div>
}